<template>
  <div class="article-top">
    <!-- 发布问题人的所有信息 -->
    <div class="article-top-sub">
      <div class="article-top-details">
        <!-- 作者信息、时间、评论数、收藏、举报 -->
        <router-link target="_blank" :to="{path:'/userHomePage',query:{userId : contentData.userId}}" :title="this.$t('workDisplay.title.authorTitle')">
          <div class="title-author n">
            <div><img :src=contentData.userHeadPhotoPath alt="" width="30px" style="border-radius: 50%;"></div>
            <div class="nicheng">
              {{contentData.userNickname == "" ? contentData.userId : contentData.userNickname}}
            </div>
          </div>
        </router-link>
        <div class="title-right">
          <div class="title-browse n" :title="this.$t('workDisplay.title.browseTitle')">
            <span>{{$t('workDisplay.title.browseTitle')}}：{{this.browseCounts}}</span>
          </div>
          <div class="title-time n" :title="this.$t('workDisplay.title.timeTitle')">
            <span>{{$t('workDisplay.title.timeTitle')}}：{{contentData.date}}</span>
          </div>
          <div v-if="loginId == contentData.userId" class="title-edit n">
            <!--target="_blank"-->
            <router-link
              :to="{path:'/publishPage/'+contentData.classify,query:{workId:contentData.articleId}}"
              :title="this.$t('workDisplay.title.edit')">
              <i class="iconfont icon-bianji1 article-top-details-icon"></i>
            </router-link>
          </div>
          <a href="javascript:;" :title="this.$t('workDisplay.title.giveLike')" @click.once="onclickCollection">
            <div class="title-collection n">
              <i v-if="collection" style="color: rgb(255, 132, 0); font-size: 23px" class="iconfont icon-dianzan article-top-details-icon"></i>
              <i v-else style="font-size: 23px" class="iconfont icon-dianzan article-top-details-icon"></i>
            </div>
          </a>
          <a href="javascript:;">
            <div class="title-report n" @click="onclickReport()">
              <i :title="this.$t('workDisplay.title.reported')" v-if="report" style="color: rgb(240, 0, 0)" class="iconfont icon-jubao1 article-top-details-icon"></i>
              <i :title="this.$t('workDisplay.title.report')" v-else class="iconfont icon-jubao1 article-top-details-icon"></i>
            </div>
          </a>
        </div>
      </div>
      <div class="article-title">
        {{contentData.title}}
      </div>
      <div class="article-title-describe">
        <v-md-editor
          :value="markdown"
          mode="preview"
        ></v-md-editor>
      </div>
    </div>

    <div class="report-box" id="reportBox">
      <div class="report-box-box">
        <strong style="color: rgb(65, 65, 65); font-size: 17px;">{{$t('workDisplay.report.reportType')}}:</strong>
        <form action="javascript:;" method="post" class="report-form">
          <input type="radio" id="11" value="低俗" class="check" v-model="reportedClassify"><label for="11">{{$t('workDisplay.report.type01')}}</label>
          <input type="radio" id="21" value="色情" class="check" v-model="reportedClassify"><label for="21">{{$t('workDisplay.report.type02')}}</label>
          <input type="radio" id="31" value="恶心" class="check" v-model="reportedClassify"><label for="31">{{$t('workDisplay.report.type03')}}</label>
          <input type="radio" id="41" value="违法违纪" class="check" v-model="reportedClassify"><label for="41">{{$t('workDisplay.report.type04')}}</label>
          <input type="radio" id="51" value="答非所问" class="check" v-model="reportedClassify"><label for="51">{{$t('workDisplay.report.type05')}}</label>
          <input type="radio" id="61" value="人身攻击" class="check" v-model="reportedClassify"><label for="61">{{$t('workDisplay.report.type06')}}</label>
          <input type="radio" id="71" value="其他问题" class="check" v-model="reportedClassify"><label for="71">{{$t('workDisplay.report.type07')}}</label>
          <input type="submit" :value="this.$t('workDisplay.report.submit')" class="reportSubmit" @click="onclickReportSubmit()">
          <input type="reset" :value="this.$t('workDisplay.report.reset')" class="report-return"@click="onclickReportReturn">
        </form>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "ArticleTitle",
        props:["loginId"],
        data() {
            return {
                markdown: this.$t('workDisplay.title.titleDesc'),
                contentData:'',
                collection:false,  // 对应着点赞
                report:false,   // 对应者举报
                baseURL:'http://localhost:8081/worksDisplay/getHeadInfo/',
                baseURL2:'http://localhost:8081/worksDisplay/getMarkdown/',
                baseURL3:'http://localhost:8081/worksDisplay/title/collection/',
                baseURL4:'http://localhost:8081/worksDisplay/title/weatherReport/',

                reportedClassify:'',
                baseURL5:'http://localhost:8081/worksDisplay/report/',

                browseCounts:'0',
                baseURL6:'http://localhost:8081/cache/browseCounts/',
            };
        },
        mounted(){
            this.getBrowseCounts()
            this.getHeadInfo()
            this.getWeatherReport()
        },
        methods:{
            getBrowseCounts(){
                this.axios.post(this.baseURL6+this.$route.query.workId).then(res=>{
                    this.browseCounts = res.data
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getHeadInfo(){
                this.axios.post(this.baseURL+this.$route.query.workId).then(res=>{
                    if (res.data != false){
                        this.contentData = res.data
                        // 获取 Markdown 文本
                        this.axios.post(this.baseURL2+res.data.describeFilename).then(res2=>{
                            if (res2.data != false) {
                                this.markdown = res2.data
                            } else {
                                this.$message.error(this.$t('workDisplay.title.serviceUnusual'))
                            }
                        }).catch(
                            exception=>{
                                console.log(exception)
                            }
                        )
                    } else {
                        // this.$message.error("服务器异常，请稍后尝试")
                        this.$router.push("/error")
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            getWeatherReport(){
                this.axios.post(this.baseURL4+this.$route.query.workId).then(res=>{
                    this.report = res.data
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },
            onclickReport(){
                if (!this.report){
                    document.getElementById("reportBox").style.height = "150px"
                } else {
                    this.$message.warning(this.$t('workDisplay.title.reportIllegal'))
                }
            },
            onclickCollection(){
                this.axios.post(this.baseURL3+this.contentData.articleId+"/"+this.contentData.classify+"/"+(this.contentData.star+1)).then(res=>{
                    if (res.data == true) {
                        this.collection = true
                        this.$message.success(this.$t('workDisplay.title.optSuccess'))
                    } else {
                        this.$message.error(this.$t('workDisplay.title.optFail'))
                    }
                }).catch(
                    exception=>{
                        console.log(exception)
                    }
                )
            },

            onclickReportReturn(){
                document.getElementById("reportBox").style.height = "0px"
            },
            onclickReportSubmit(){
                if (this.reportedClassify.length>0){
                    document.getElementById("reportBox").style.height = "0px"
                    this.axios.post(this.baseURL5+this.$route.query.workId+"/"+this.reportedClassify).then(res=>{
                        if (res.data == false) {
                            this.failOpt(this.$t('workDisplay.title.optFail'))
                        } else {
                            this.successOpt(this.$t('workDisplay.title.optSuccess'))
                            this.report = true
                        }
                    }).catch(
                        exception=>{
                            console.log(exception)
                        }
                    )
                }else {
                    this.$message.warning(this.$t('workDisplay.title.reportNull'))
                }
            },

            successOpt(message) {
                this.$notify({
                    title: this.$t('notify.success'),
                    message: message,
                    type: 'success'
                })
            },
            failOpt(message) {
                this.$notify.error({
                    title: this.$t('notify.error'),
                    message: message
                });
            }

        }
    }
</script>

<style scoped>
  .article-top{
    width: 100%;
    min-height: 150px;
    background-color: white;
    letter-spacing: 1px;
    padding-bottom: 10px;
    padding-top: 10px;
    box-shadow: 0 15px 10px -15px rgb(187, 187, 187);
  }
  .article-top-sub{
    width: 1100px;
    min-height: 150px;
    margin: 0 auto;
  }
  .article-top-details{
    width: 100%;
    height: 50px;
  }
  .n{
    float: left;
    height: 50px;
    line-height: 50px;
    margin-left: 20px;
    text-align: center;
    font-size: 12px;
    color: rgb(88, 88, 88);
  }
  .title-author{
    width: 300px;
    margin-left: 0px;
  }
  .nicheng:hover{
    color: rgb(0, 0, 0);
  }
  .title-author div{
    float: left;
  }
  .title-author div:nth-child(1){
    margin-top: 10px;
    margin-right: 5px;
  }
  .title-author div:nth-child(2){
    max-width: 250px;
    /* 文字溢出处理 */
    display: -webkit-box;
    overflow:hidden;
    text-overflow: ellipsis;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:1;
  }
  .title-right{
    float: left;
    width: 800px;
    height: 50px;
  }
  .title-browse{
    width: 150px;
    margin-left: 265px;
    font-weight: lighter;
    /*background-color: tomato;*/
  }
  .title-time{
    width: 220px;
    margin-right: 30px;
    font-weight: lighter;
    /*background-color: tomato;*/
  }
  .title-time i{
    font-size: 18px;
  }
  .title-comment i{
    font-size: 18px;
  }
  .title-edit{
    width: 25px;
    margin-left: 0px;
  }
  .title-edit i{
    width: 25px;
    font-size: 18px;
  }
  .title-edit i:hover{
    color: rgb(49, 198, 0);
  }
  .title-collection{
    width: 25px;
  }
  .title-collection i:hover{
    color: rgb(255, 132, 0);
  }
  .title-report{
    width: 25px;
  }
  .title-report i:hover{
    color: rgb(240, 0, 0);
  }
  .title-report i:active{
    color: rgb(255, 0, 0);
  }
  .article-top-details-icon{
    font-size: 20px;
    color: rgb(137, 137, 137);
  }
  .article-title{
    width: 1060px;
    min-height: 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    font-size: 28px;
    font-weight: bolder;
    color: rgb(0, 4, 48);
    line-height: 28px;
    padding: 20px 20px;
    padding-bottom: 10px;
    letter-spacing: 1px;
    background-color: rgb(240, 240, 240);
    font-family: cursive;
  }
  .article-title-describe{
    width: 1070px;
    padding: 10px 15px;
    padding-top: 0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    background-color: rgb(240, 240, 240);
  }

  .report-box{
    width: 100%;
    height: 0px;
    position: fixed;
    bottom: 0px;
    background-color: white;
    overflow: hidden;
    box-shadow: 0 0 15px rgb(182, 182, 182);
    transition: 0.3s;
    z-index: 99;
  }
  .report-box-box{
    width: 1100px;
    height: 120px;
    margin: 30px auto;
    letter-spacing: 2px;
  }
  .report-form{
    width: 100%;
    height: 50px;
    padding-top: 20px;
    font-size: 15px;
    position: relative;
  }
  .report-form .check{
    margin-right: 5px;
    width: 16px;
    height: 16px;
  }
  .reportSubmit{
    width: 70px;
    height: 25px;
    line-height: 22px;
    color: rgb(133, 133, 133);
    border: 1px solid rgb(226, 226, 226);
    background-color: white;
    border-radius: 3px;
    font-size: 13px;
    margin-left: 70px;
    transition: 0.2s;
    position: absolute;
    right: 100px;
  }
  .reportSubmit:hover{
    color: rgb(247, 247, 247);
    background-color: rgb(73, 73, 73);
    border: 1px solid rgb(226, 226, 226);
  }
  .reportSubmit:active{
    background-color: rgb(0, 0, 0);
  }
  .report-return{
    width: 70px;
    height: 25px;
    line-height: 22px;
    text-align: center;
    color: rgb(143, 143, 143);
    background-color: #ffffff;
    border: 1px solid rgb(226, 226, 226);
    border-radius: 3px;
    font-size: 13px;
    margin-left: 20px;
    transition: 0.2s;
    position: absolute;
    right: 0px;
  }
  .report-return:hover{
    color: rgb(247, 247, 247);
    background-color: rgb(73, 73, 73);
    border: 1px solid rgb(226, 226, 226);
  }
  .report-return:active{
    background-color: rgb(0, 0, 0);
  }
</style>
